import {AtDrawer} from "taro-ui";
import {Component} from 'react';
import Taro from '@tarojs/taro';
import {View, Text, Image} from "@tarojs/components";
import {connect} from "react-redux";
import './menu.less'

import {showDrawer, hideDrawer, changeCata} from "../../actions/menu";
import {validateUser} from "../../actions/user";

type PageStateProps = {
  menu: {
    cataData: any,
    currentCata: any,
    showDrawer: any
  },
  user: {
    accesstoken: '',
    type: '',
    avatar_url: ""
    id: ""
    loginname: ""
    success: false
  }
}

type PageDispatchProps = {
  showMenu: () => void
  hideDrawer: () => void
  changeCata: (object) => any
}

type PageOwnProps = {}

type PageState = {
  tittle: ''
}

type IProps = PageStateProps & PageDispatchProps & PageOwnProps & PageState

interface Menu {
  props: IProps;
}

// @ts-ignore
// eslint-disable-next-line @typescript-eslint/no-shadow
@connect(({ menu, user }) => ({
  menu, user
}), (dispatch) => ({
  showMenu() {
    // @ts-ignore
    dispatch(showDrawer())
  },
  hideDrawer() {
    // @ts-ignore
    dispatch(hideDrawer())
  },
  changeCata(cata) {
    // @ts-ignore
    dispatch(changeCata(cata))
  }
}))
class Menu extends Component {
  constructor(props) {
    super(props);
    console.log('----Menu props: ', props);
    this.state = {
      // @ts-ignore
      // eslint-disable-next-line react/no-unused-state
      title: '抽屉组件'
    };
  }

  // 显示抽屉
  showDrawer = () => {
    // @ts-ignore
    const {showMenu} = this.props;
    showMenu && showMenu();
  };

  getItems = (cataData) => {
    return cataData && cataData.map(item => item.value);
  };

  //点击分类时触发
  clickCata = (index) => {
    // eslint-disable-next-line @typescript-eslint/no-shadow
    let {menu: {cataData, currentCata}, changeCata} = this.props;
    let clickCata = cataData[index];//获取点击项的数据
    if (clickCata.key !== currentCata.key) {
      changeCata && changeCata(clickCata);//点击分类 触发切换分类方法
    }
  };

  //关闭抽屉时触发
  closeDrawer = () => {
    this.props.hideDrawer && this.props.hideDrawer();
  };

  toLogin = () => {
    // @ts-ignore
    const { user } = this.props;
    validateUser(user).then(result => {
      if (result) {
        //成功跳转到用户详情
        Taro.navigateTo({ url: '/user/pages/user/user' });
      }
    });
  };

  render() {
    // eslint-disable-next-line @typescript-eslint/no-shadow
    let { menu: {showDrawer, cataData, currentCata} } = this.props;
    let items = this.getItems(cataData); //获取分类列表

    return (
      <View className='topiclist__menu'>
        <AtDrawer
          onItemClick={(index)=>this.clickCata(index)}
          onClose={()=>this.closeDrawer()}
          show={showDrawer}
          items={items}
        />
        <Image
          className='topiclist__menu-left'
          src={require('../../assets/img/cata.png')}
          onClick={()=>this.showDrawer()}
        />
        <Text
          className='topiclist__menu-title'
        >
          {currentCata ? currentCata.value : ''}
        </Text>

        <Image
          className='topiclist__menu-right'
          src={require('../../assets/img/login.png')}
          onClick={()=>this.toLogin()}
        />
      </View>);
  }
}

export default Menu;
